<template>
  <custom-container class="extension-data">
    <custom-container-header no-spacing>
      <el-form :model="form" inline size="medium">
        <el-form-item label="图片类型:">
          <el-select v-model="form.materialType">
            <el-option v-for="item in consts.EXTENSION_TYPE" :label="item.name" :key="item.value"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片宽尺寸:">
          <el-select v-model="form.materialSize">
            <el-option v-for="item in consts.EXTENSION_SIZE" :label="item.name" :key="item.value"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-popover
        placement="bottom"
        width="470"
        :offset="100"
        trigger="click">
        <div class="extension-data__tip">
          <div class="extension-data__tip-title">允许输入的类型：</div>
          <div class="extension-data__tip-content">
            1.代理专属的标示，例如某代理的普通域名为：“http://abc.ballbet.com”，<br>允许直接输入“abc”绑定成功。<br>
            2.代理的普通域名。例如某代理的普通域名为：“http://abc.ballbet.com”，<br>允许直接输入“http://abc.ballbet.com”这样的域名，<br>也允许输入“abc.ballbet.com”这样不带“http”前缀。<br>
            3.代理的专属域名。例如某代理的专属域名为：“http://www.ballbet2018.com”，<br>允许直接输入“http://www.ballbet2018.com”这样的域名，<br>也允许输入“www.ballbet2018.com”这样不带“http”前缀，<br>也允许输入“ballbet2018.com”这样的短域名。
          </div>
        </div>
        <div class="extension-data__tip-icon" slot="reference">?</div>
      </el-popover>
    </custom-container-header>

    <custom-container-body>
      <el-table :data="tableData" :loading="loading" element-loading-text="加载中..." border border-radius>
        <el-table-column label="图片" align="center" width="600">
          <template slot-scope="{row}">
            <el-popover
              placement="bottom"
              width="600"
              trigger="click"
            >
              <img width="600px" :src="row.imageUrl"/>
              <img slot="reference" class="extension-data__thumb" :src="row.imageUrl"/>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
          label="类型"
          align="center"
          >
          <template slot-scope="{row}">
            {{row.materialType | toType}}
          </template>
        </el-table-column>

        <el-table-column label="尺寸" align="center" prop="materialSize"></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="185px"
        >
          <template slot-scope="{row}">
            <div class="extension-data__op">
              <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
                <el-button type="link"
                           size="small"
                           :data-clipboard-text="row.imageUrl"
                           class="clipboard-btn"
                           @click="">
                  <svg-icon icon-class="link" type="primary"></svg-icon>
                  复制图片链接
                </el-button>
              </el-tooltip>
              <br />
              <el-button
                type="link"
                @click="saveImg(row.imageUrl)"
              >
                <svg-icon icon-class="download"type="primary"></svg-icon>
                下载图片
              </el-button>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
            <div class="el-table-text">暂无数据</div>
          </div>
        </template>
      </el-table>
    </custom-container-body>
  </custom-container>
</template>

<script>
  import {
    materialApi as getApi
  } from "@/services/api/promotion";

  import {getCommand} from "@/build";

  export default {
    name: "resources",

    mixins: [getCommand],

    data() {
      return {
        tableData: [],
        form: {
          materialType: -1,
          materialSize: -1
        },
        loading: false
      };
    },

    filters: {
      toType(value) {
        if (value === 1) {
          return '品牌';
        } else {
          return value;
        }
      }
    },

    watch: {
      form: {
        handler() {
          this.getAll();
        },
        deep: true
      }
    },

    methods: {
      saveImg(imgSrc) {
        _.downloadIamge(imgSrc);
      },
    },

    mounted() {

      this.bindGet(getApi, 'tableData', {
        sendingData: 'form',
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
  @include b(extension-data) {
    @include e(thumb) {
      height: 60px;
    }
    @include e(op) {
      text-align: left;
    }

    @include e(tip-icon) {
      width: 24px;
      height: 24px;
      background: rgba(243, 243, 243, 1);
      color: $--color-black-4;
      font-size: $--font-size-x-large;
      border-radius: $--border-radius-circle;
      text-align: center;
      line-height: 24px;
      display: inline-block;
      cursor: pointer;
      vertical-align: top;
      margin-top: -13px;
      margin-left: 10px;
    }
    @include e(tip) {
      padding: 10px 8px;
      box-sizing: border-box;
    }
    @include e(tip-title) {
      font-size: $--font-size-small;
      font-weight: bold;
      margin-bottom: 4px;
    }
    @include e(tip-content) {
      font-size: $--font-size-small;
      line-height: 22px;
      margin-bottom: 12px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
</style>
